<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 搜索框:trim去掉输入内容两边的空格 -->
    <van-search @input='searchList' @search='handleSearch' v-model.trim="q" placeholder="请输入搜索关键词" shape="round"/>
    <!-- 搜索历史 -->
    <div v-show='history.length&&!q' class="history-box">
      <div class="head">
        <span>历史记录</span>
        <van-icon @click='clearHistory' name="delete"></van-icon>
      </div>
      <van-cell-group>
        <van-cell v-for='(item, index) in history' :key='index'>
          <router-link :to='"/result/" + item' class="word_btn">{{item}}</router-link>
          <van-icon @click='deleteHistory(index)' class="close_btn" slot="right-icon" name="cross"/>
        </van-cell>
      </van-cell-group>
    </div>
    <!-- 联想列表 -->
    <van-cell-group v-show='q' class="suggest-box">
      <van-cell v-for='(item, index) in newList' :key='index' icon="search">
        <p @click='handleJump(index)' v-html='item'></p>
      </van-cell>
    </van-cell-group>
  </div>
</template>
<script>
import { suggest } from '@/api/channel.js'
const SEARCH_KEY = 'hm-toutiao-mobile-search-123'

export default {
  name: 'Search',
  data () {
    return {
      timer: null,
      // 根据关键字搜索到的列表
      list: [],
      // 搜索关键字
      q: '',
      // 搜索的历史
      history: JSON.parse(localStorage.getItem(SEARCH_KEY)) || []
    }
  },
  computed: {
    newList () {
      // 对原始的联想列表进行高亮处理
      const reg = new RegExp(this.q, 'ig')
      return this.list.map(item => {
        return item.replace(reg, '<span>' + this.q + '</span>')
      })
    }
  },
  methods: {
    handleJump (index) {
      // 需要在跳转之前，把列表项内容还原回原始数据
      // const reg = new RegExp('<span>' + this.q + '</span>', 'ig')
      // this.$router.push('/result/' + item.replace(reg, this.q))
      this.$router.push('/result/' + this.list[index])
    },
    searchList () {
      // 根据输入的关键字查询匹配的数据列表
      try {
        window.clearTimeout(this.timer)
        this.timer = window.setTimeout(async () => {
          if (!this.q) return
          const ret = await suggest(this.q)
          this.list = ret.data.options
          // this.list = ret.data.options.map(item => {
          //   // 给每一项内容进行替换（关键词外层包裹一个span标签）
          //   const reg = new RegExp(this.q, 'ig')
          //   return item.replace(reg, '<span>' + this.q + '</span>')
          // })
        }, 300)
      } catch (e) {
        console.log(e)
        this.$toast.fail('查询失败！')
      }
    },
    clearHistory () {
      // 清除所有搜索历史
      this.history = []
      // 清除缓存中的搜索历史
      localStorage.removeItem(SEARCH_KEY)
    },
    deleteHistory (index) {
      // 删除单个关键字
      this.history.splice(index, 1)
      // 把剩余的数据再写入缓存
      localStorage.setItem(SEARCH_KEY, JSON.stringify(this.history))
    },
    handleSearch () {
      // 把关键字缓存起来(需要进行数组去重)
      this.history.push(this.q)
      // Set是ES6引入的新的数据结构，和数组类似，但是有一个区别：不允许有重复元素
      this.history = [...new Set(this.history)]
      localStorage.setItem(SEARCH_KEY, JSON.stringify(this.history))
      // 跳转到搜索结果页面
      // this.$router.push('/result?kw=' + this.q)
      this.$router.push('/result/' + this.q)
    }
  }
}
</script>
<style scoped lang="less">
.history-box {
  padding: 0 20px;
  .head{
    line-height: 36px;
    color: #999;
    .van-icon{
      font-size: 16px;
      float: right;
      margin-top: 10px;;
    }
  }
  .van-cell{
    padding: 10px 0;
  }
  .word_btn{
    color:#3296fa;
  }
  .close_btn{
    margin-top:5px;
    color: #999;
  }
}
.suggest-box{
  /deep/ .van-cell{
    padding: 10px 20px;
    color: #999;
    p{
      span{
        color: red;
      }
    }
  }
}
</style>
